<template>
	<view class="orderview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 title="物流信息"></hx-navbar>
		</view>

		<view class="trace-box left">
			<view class="trace-item qi after">
				<text>我的位置</text>
				<u-icon class="icon" name="car-fill" color="#2979ff" size="28" v-if="orderInfo.status == 7"></u-icon>
				<text class="tip">我的位置</text>
			</view>
			<view class="trace-item zhan after">
				<text>{{orderInfo.startPointName}}</text>
				<u-icon class="icon" name="car-fill" color="#2979ff" size="28" v-if="orderInfo.status == 4"></u-icon>
				<text class="tip">取货站</text>
			</view>
			
			<view class="trace-item after" v-if="orderInfo.startPointImages">
				<text class="tit">取货单:</text>
				<view class="img">
					<block v-for="(item, index) in orderInfo.startPointImages.split(',')" key="index">
						<image :src="item" mode="widthFix" @click="previewImage(index)"></image>
					</block>
				</view>
			</view>
			<view class="trace-item after" v-else>
				<text class="tit">取货单:</text>
				<uni-upimg @change="getImageInfo1" :upimg_preview="serviceArr1" :upload_count="3"></uni-upimg>
			</view>
			
			<view class="trace-item zhong">
				<text>{{orderInfo.endPointName}}</text>
				<u-icon class="icon" name="car-fill" color="#2979ff" size="28" v-if="orderInfo.status == 5"></u-icon>
				<text class="tip">终点</text>
			</view>
			
			<view class="trace-item" v-if="orderInfo.startPointImages">
				<text class="tit">到货单:</text>
				<view class="img">
					<block v-for="(item, index) in orderInfo.startPointImages.split(',')" key="index">
						<image :src="item" mode="widthFix" @click="previewImage(index)"></image>
					</block>
				</view>
			</view>
			<view class="trace-item" v-else>
				<text class="tit">到货单:</text>
				<uni-upimg @change="getImageInfo2" :upimg_preview="serviceArr2" :upload_count="3"></uni-upimg>
			</view>
		</view>

		<view class="trace-box">
			<view class="trace-item">
				<text class="tit">发货人:</text>
				<text class="tiv">{{orderInfo.carOwnerName}}</text>
			</view>
			<view class="trace-item">
				<text class="tit">联系方式:</text>
				<text class="tiv">{{Phone}}</text>
			</view>
		</view>

		<view class="fiexd-btm">
			<u-button class="custom-style" type="primary" @tap="confirm" v-if="orderInfo.status == 4 || orderInfo.status == 7">提交</u-button>
		</view>
	</view>
</template>

<script>
	import uniUpimg from '@/components//uni-upimg/uni-upimg.vue'
	export default {
		components: {
			uniUpimg
		},
		data() {
			return {
				id: '',
				type: 0,
				orderInfo: '',
				serviceArr1: [],
				serviceArr2: [],
				Phone: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.loadData()
		},
		methods: {
			loadData() {
				this.$api.request('POST', '/api/order/selectOrderInfoById', {
					id: this.id
				}).then(res => {
					this.orderInfo = res.data
				})
				this.$api.request('POST', '/api/user/selectUserTerracePhone', {}, false).then(res => {
					this.Phone = res.data
				})
			},
			previewImage(idx, images) {
				uni.previewImage({
					current: idx,
					urls: images
				})
			},
			getImageInfo1(e) {
				this.serviceArr1 = e
				this.type = 0
			},
			getImageInfo2(e) {
				this.serviceArr2 = e
				this.type = 1
			},
			//提交
			confirm() {
				if (this.type == 0 && !this.serviceArr1[0]) {
					this.$api.msg('请上传取货单')
					return
				}
				if (this.type == 1 && !this.serviceArr2[0]) {
					this.$api.msg('请上传到货单')
					return
				}
				let data = {
					id: this.id,
					start_point_images: this.serviceArr1.join(',')
				}
				let url = '/api/order/updateOrderStartPointImagesById'
				if (this.type == 1) {
					data = {
						id: this.id,
						end_point_images: this.serviceArr2.join(',')
					}
					url = '/api/order/updateOrderEndPointImages'
				}
				this.$api.request('POST', url, data).then(res => {
					this.loadData()
					this.$api.msg('提交成功')
				})
			}
		}
	}
</script>

<style lang="less">
	.fiexd-btm {
		position: static;
		margin: 100upx 30upx 100upx;
	}
</style>
